<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
			}

			html {
				height: 100%;
			}

			body {
				height: 100%;
			}

			#parent {
				width: 800px;
				height: 100%;
				margin: 0px auto;
			}

			#top {
				height: 200px;
				background-color: #f44336;
				display: flex;
				flex-direction: column;
			}

			#input {
				width: 600px;
				height: 30px;
				line-height: 30px;
				font-size: 30px;
			}

			#add {
				width: 120px;
				height: 50px;
				background-color: #d9d9d9;
				text-align: center;
				line-height: 60px;
				border: #d9d9d9 7px solid;
				border-left-width: 40px;
				border-right-width: 40px;
				position: relative;
				top: -4px;
			}

			.item {
				width: 850px;
			}

			.item-div {
				display: inline-block;
				width: 750px;
				height: 50px;
				background-color: #d9d9d9;
				line-height: 50px;
				padding-left: 50px;
			}

			.close {
				position: relative;
				left: -30px;
			}

			#center {
				display: flex;
				flex-direction: row;
			}

			.center-div {
				padding-top: 10px;
				/* display: inline-block; */
				width: 150px;
				height: 50px;
				background-color: #d9d9d9;
				display: flex;
				flex-direction: column;
			}

			.center-div-input {
				align-items: center;
			}

			.center-div-div {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="top">
				<div style="color: white;font-size: 30px;padding-top: 50px;margin: 0px auto;">My To Do List</div>
				<div style="margin: 20px auto;"><input id="input" type="text" placeholder="Title..." /><span id="add"
						onclick="onAddClick()">Add</span></div>
			</div>
			<div id="center">
				<div class="center-div" style="background-color: #f9f9f9;">
					<input class="center-div-input" type="radio" name="type" />
					<div class="center-div-div">全部</div>
				</div>
				<div class="center-div">
					<input class="center-div-input" type="radio" name="type" />
					<div class="center-div-div">Waiting</div>
				</div>
				<div class="center-div" style="background-color: #f9f9f9;">
					<input class="center-div-input" type="radio" name="type" />
					<div class="center-div-div">Doing</div>
				</div>
				<div class="center-div">
					<input class="center-div-input" type="radio" name="type" />
					<div class="center-div-div">Finished</div>
				</div>
			</div>
			<div id="bottom">
				<!-- <div class="item"><div class="item-div" style="background-color: #f9f9f9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #d9d9d9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #f9f9f9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #d9d9d9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #f9f9f9;">学习打代码</div><span class="close">X</span></div>
				<div class="item"><div class="item-div" style="background-color: #d9d9d9;">学习打代码</div><span class="close">X</span></div> -->
			</div>
		</div>
	</body>

	<script>
		let all = [{
				"id": 1,
				"info": "学习",
				"type": "Waiting"
			},
			{
				"id": 2,
				"info": "吃饭",
				"type": "Doing"
			},
			{
				"id": 3,
				"info": "玩",
				"type": "Finished"
			}
		];
		let show = [];

		let types = document.getElementsByName("type");
		for (let i = 0; i < types.length; i++) {
			types[i].onclick = function() {
				if (i == 0) {
					show = all;
				} else if (i == 1) {
					show = [];
					for (let j = 0; j < all.length; j++) {
						if (all[j].type == "Waiting") {
							show.push(all[j]);
						}
					}
				} else if (i == 2) {
					show = [];
					for (let j = 0; j < all.length; j++) {
						if (all[j].type == "Doing") {
							show.push(all[j]);
						}
					}
				} else {
					show = [];
					for (let j = 0; j < all.length; j++) {
						if (all[j].type == "Finished") {
							show.push(all[j]);
						}
					}
				}
				showInBottom();
			}
		}

		function onAddClick() {
			let info = document.getElementById("input").value;

			let t = {
				"id": all[all.length - 1].id + 1,
				"info": info,
				"type": "Waiting"
			};

			all.push(t);

			let types = document.getElementsByName("type");
			for (let i = 0; i < types.length; i++) {
				if (types[i].checked) {
					if (i == 1) {
						show.push(t);

					}
				}
			}
			showInBottom();
		}

		function onCloseClick(id) {
			for (let i = 0; i < all.length; i++) {
				if (all[i].id == id) {
					all.splice(i, 1);
				}
			}
			for (let i = 0; i < show.length; i++) {
				if (show[i].id == id) {
					show.splice(i, 1);
				}
			}
			showInBottom();
		}

		function changeColor(id) {
			for (let i = 0; i < all.length; i++) {
				if (all[i].id == id) {
					if (all[i].type == "Waiting") {
						all[i].type = "Doing";
					} else if (all[i].type == "Doing") {
						all[i].type = "Finished";
					}
				}
			}
			let typesIndex=-1;
			let types = document.getElementsByName("type");
			for (let i = 0; i < types.length; i++) {
				if (types[i].checked) {
					typesIndex=i;
				}
			}
			if (show != all) {
				for (let i = 0; i < show.length; i++) {
					if (show[i].id == id&&typesIndex!=3) {
						show.splice(i, 1);
					}
				}
			}
			showInBottom();
		}

		function showInBottom() {
			let innerHTML = "";
			for (i = 0; i < show.length; i++) {
				let color = "";
				let colorText = show[i].type;
				if (show[i].type == "Waiting") {
					color = "red"
				} else if (show[i].type == "Doing") {
					color = "yellow";
				} else {
					color = "green";
				}


				if (i % 2 == 0) {
					innerHTML = innerHTML +
						"<div class=\"item\"><div class=\"item-div\" style=\"background-color: #f9f9f9;\"><span onclick=\"changeColor(" +
						show[i].id + ")\" style=\"background-color: " + color + "\">" + colorText +
						"</span>" + show[i].info + "</div><span class=\"close\" onclick=\"onCloseClick(" + show[i].id +
						")\">X</span></div>";

				} else {
					innerHTML = innerHTML +
						"<div class=\"item\"><div class=\"item-div\" style=\"background-color: #d9d9d9;\"><span onclick=\"changeColor(" +
						show[i].id + ")\" style=\"background-color: " + color + "\">" + colorText +
						"</span>" + show[i].info + "</div><span class=\"close\" onclick=\"onCloseClick(" + show[i].id +
						")\">X</span></div>";

				}
			}
			document.getElementById("bottom").innerHTML = innerHTML;
		}
	</script>
</html>